<template>
  <!-- <div>
    图片懒加载
  </div>
    <button @click="flag = !flag">显示隐藏</button><br>
    <transition>
      <img v-show="flag" ref="target" alt="">
    </transition>
    <transition name="test">
      <img v-show="flag" src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg" alt="">
    </transition> -->

  <!-- 1. 复习 .sync 修饰符和 vue2 的 v-model -->
  <!-- <son @change-money="e => money -= e" :money="money" /> -->
  <!-- 
    在 vue2 中 v-model 默认做了两件事:
      1. 传入一个 value 属性
      2. 绑定一个 input 事件

    还提供了 .sync 修饰符, 弥补 v-model 的不足
    v-model 只能绑定一次 (因为绑定的永远都是 value 和 input 事件)
    区别:
    1. 子组件需要接收的值不是 value 而是自己定义的 money (由于可以自由定义, 所以可以定义多个)
    2. 触发事件也变成了 update:属性名  update:money 这种方式

    不过 .sync 修饰符在 vue3 中已经被移除了 (被废弃)
  -->

  <!-- 2. 学习 vue3 的 v-model -->
  <!-- 
    v-model 完全替代了 .sync
    在 vue3 中 v-model 如果不指定属性, 默认做的两件事:
    1. 传入一个 modelValue 属性
    2. 绑定一个 update:modelValue 事件
   -->
  <son v-model="money" v-model:house="house" />

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import Son from './son.vue'

const money = ref(100)
const house = ref('汤臣一品')




// const flag = ref(true)

// // const img = document.createElement('img')
// const target = ref<HTMLImageElement | null>(null)

// // 使用 useIntersectionObserver 获取目标元素是否出现在可视区, 当出现在可视区后给图片的 src 赋值即可
// // 参数1: target 告诉这个方法, 我要监视的 DOM 元素是谁
// // 参数2: 回调函数, 会携带一个数组给我们, 数组中只有一个对象, 对象中有一个属性: isIntersecting
// useIntersectionObserver(target, ([{ isIntersecting }]) => {
//   if (isIntersecting) {
//     target.value!.src = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg' 
//   }
// })

</script>

<style scoped lang="less">
// div {
//   height: 5000px;
// }

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

.test-leave-active {
  animation: bounce .5s;
}

.test-enter-active {
  animation: bounce .5s;
}

.v-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.v-leave-active {
  transition: all .5s;
}
.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.v-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}
.v-enter-active {
  transition: all .5s;
}
.v-enter-to {
  opacity: 1;
  transform: translateX(0);
}

</style>